<template>
	<div class="body">
		<!-- 添加地址 -->
		<!-- <div class="header">
			<div>
				<img @click="returnGo" src="../../assets/homeimg/滑动左.png" />
				<span>添加地址</span>
			</div>
		</div> -->
		<div class="form">
			<van-field v-model="form.contactor_name" label="收货人" placeholder="请输入收货人姓名" />
			<van-field v-model="form.phone" type="tel" label="手机号" placeholder="请输入手机号" />
			<van-field v-model="form.address" label="收货地址" placeholder="请选择收货地址" @click="changeArea" @focus="focus" />
			<van-field v-model="form.street" label="详细地址" placeholder="请输入详细地址" />
			<div class="moren">
				<span>设为默认地址</span>
				<van-switch active-color="#FFD141" v-model="checked" />
			</div>
		</div>
		<van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
			<van-area :area-list="areaList" :columns-num="3" @confirm="sure" @cancel="cancel" />
		</van-popup>
		<div class="button" @click="onSave()">保存</div>

		<!-- <van-address-edit :area-list="areaList" :address-info="addressList" :area-columns-placeholder="['请选择', '请选择', '请选择']"
		 @save="onSave" @change-area="changeArea" @change-detail="onChangeDetail" /> -->
		<!-- <div @click="toAddress" style="width: 200px;">{{city}}</div> -->
	</div>
</template>

<script>
	import {
		Toast
	} from "vant";
	import areaList from "@/assets/city";
	import addressApi from "@/api/address";
	// import { TextToCode } from "element-china-area-data";
	export default {
		data() {
			return {
				checked: false,//是否默认地址
				// text: "",
				show: false,
				id: null,//地址id
				areaList,
				// area: {},
				form: {
					contactor_name: "",
					address_id: "",
					phone: "",
					address: "",
					street: "",
				},
			};
		},
		components: {

		},
		created() {
			// var token = info.token;
			var token = this.$store.state.token;
			if(this.$route.params.id){
				this.id = this.$route.params.id;
				this.getDetail(token, this.id);
			}
			// if (localStorage.getItem("user")) {
			// 	var info = JSON.parse(localStorage.getItem("user"));
			// };
			
		},
		methods: {
			changeArea() {
				this.show = true;
			},
			focus() {
				document.activeElement.blur();
			},
			sure(e) {
				this.show = false;
				// console.log(e);
				var list = e.map((el, index) => {
					return el.name;
				})
				this.form.address = list.toString();
				// console.log(this.form.address)
			},
			cancel() {
				this.show = false;
			},
			//地址信息
			getDetail(token, id) {
				if (id) {
					addressApi.addressInfo({
						token,
						id
					}).then(res => {
						// this.form.id = res.data.id;
						this.form.address_id = res.data.address_id;
						this.form.contactor_name = res.data.contactor_name;
						this.form.phone = res.data.phone;
						this.form.address = res.data.address;
						this.form.street = res.data.street;
						this.checked = res.data.is_default == 0 ? false : true;
					});
				}
			},
			onSave() {
				this.form.address_id = Math.floor(Math.random());
				let data = {}
				if(this.id){
					data = {
						is_default: this.checked ? 1 : 0,
						id: this.id,
						...this.form
					}
				}else{
					data = {
						is_default: this.checked ? 1 : 0,
						...this.form
					}
				}
				
				this.$http.post('/addons/xshop/user/editAddress',data).then(res => {
					// console.log(res)
					this.$toast.success("成功!");
					this.$router.back()
				})
			},
			returnGo() {
				this.$router.go(-1);
			},

		}
	};
</script>

<style scoped lang="scss">
	.moren{
		background-color: #fff;
		width: 100%;
		height: 10.8vw;
		display: flex;
		padding: 10px 16px;
		box-sizing: border-box;
		align-items: center;
		font-size: 14px;
		justify-content: space-between;
	}
	.body {
		width: 100%;
		color: #333333;
		height: 100%;
		display: flex;
		flex-direction: column;
		background: rgba(247, 247, 247, 1);
		background-size: 100% 100%;
	}
	::v-deep .van-cell{
		font-size: 14px;
	}
	::v-deep .van-field__control{
		text-align: right;
	}
	.header {
		// font-weight: bold;
		width: 100%;
		text-align: center;
		height: 2.75rem;
		line-height: 2.75rem;
		padding-top: 1.25rem;
		position: relative;
		background: rgba(255, 255, 255, 1);
		color: #333333;
		font-size: 1.25rem;

		img {
			width: 0.625rem;
			height: 1.125rem;
			position: absolute;
			left: 1rem;
			bottom: 0.75rem;
		}
	}
// 在scss文件中
	@supports(bottom:constant(safe-area-inset-top)) {

		// 如果存在底部安全区域
		.header {
			padding-top: constant(safe-area-inset-top);

		}

	}

	@supports(bottom:env(safe-area-inset-top)) {

		// 如果存在底部安全区域
		.header {
			padding-top: env(safe-area-inset-top);

		}

	}

	.form {
		width: 100%;
		margin-top: 0.625rem;

	}

	.button {
		width: 18.4375rem;
		height: 2.75rem;
		margin: 0 auto;
		margin-top: 9.375rem;
		background: linear-gradient(90deg,
			rgba(255, 205, 59, 1) 0%,
			rgba(255, 179, 14, 1) 100%);
		border-radius: 1.375rem;
		font-size: 1.125rem;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 2.75rem;
	}
</style>


<style lang="scss">
	.van-address-edit {
		::v-deep .van-button.van-button--danger {
			background-color: linear-gradient(90deg,
				rgba(255, 205, 59, 1) 0%,
				rgba(255, 179, 14, 1) 100%);

		}
	}
</style>
